<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义指令</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-direct1="inpData" v-model="inpData">
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            inpData:"hello"
        },
        directives: {
            direct1: {
                // 对应的钩子bind：匿名回调函数，回调函数是一个带有两个参数的方法
               // binding：一个对象，包含以下属性：
                            // name：指令名，不包括 v- 前缀。
                            // value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
                            // oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
                            // expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
                            // arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
                            // modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
                            // vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
                            // oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

                // 如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。定义元素属性要注意钩子之间的执行顺序
                bind: function (el, binding) {
                    console.log("bind:",binding);
                    // 通过属性绑定，添加共享数据
                    el.dataset.someDataAttr = "message";

                    // 不能对dom进行事件处理
                    // el.focus();
                },
                inserted: function (el,binding) {
                    console.log("inserted:",binding);
                    // 通过获取el属性，获取bind钩子中的数据
                    console.log(el.attributes[1].value);
                    // 对dom进行事件处理
                    el.focus();
                },
                update: function (el,binding) {
                    console.log("update:",binding);
                },
                componentUpdated: function (el,binding) {
                    console.log("componentUpdated:",binding);
                },
                unbind: function (el,binding) {
                    console.log("unbind:",binding);
                }
            }
        }
    })
</script>
</html>